{% extends "layout.html" %}
{% block body %}
<link rel="stylesheet" href="/static/house/css/detail.css">
<!-- 图表统坟插件 -->
<script src="/static/vendor/echarts-stat/ecStat.min.js"></script>
<!-- 图表插件 -->
<script src="/static/js/echarts.min.js"></script>

<header class="masthead no-margin-bottom" style="background-color: #fff">
    <div class="overlay"></div>
    <div class="container">
        <!--内容-->
        <div class="row">
            <div class="col-lg-12 col-md-12 mx-auto detail-body">
                <div class="row info-line">
                    <!--大标题-->
                    <div class="col-lg-12 col-md-12 detail-header">
                        <h3>{{house.address}}&nbsp {{house.rooms}}</h3>
                        <div class="describe">
                            <span>为您精准定位，当前城市房源信息</span>
                        </div>
                    </div>
                    <!--左详情-->
                    <div class="col-lg-8 col-md-8">
                        <div class="course">

                            <!--图-->
                            <div><a href="#"><img class='img-fluid img-box' src="/static/img/house-bg1.jpg" alt=""></a>
                            </div>
                            <!--价格-->
                            <div class="house-info" style="padding:20px 0 0 0;">
                                <span class="price">￥&nbsp{{house.price}}/月</span>
                                <span class="collection" id="btn-collection">
                                    <a>
                                        <!-- 判断是收藏 -->
                                        {% if collection %}
                                        <i class="fa fa-heart active" aria-hidden="true"> 已收藏</i>
                                        {% else %}
                                        <i class="fa fa-heart" aria-hidden="true">未收藏</i>
                                        {% endif %}
                                    </a>
                                </span>
                            </div>
                            <div class="house-info" style="padding: 0px 0 20px 0;">
                                <span class="attribute-text">
                                    <i class="fa fa-heart" aria-hidden="true" style="color: #e74c3c"></i> 
                                    {{house.page_views}}人浏览过
                                </span>
                            </div>

                            <!--基本信息标题-->
                            <div class="attribute-header">
                                <h4>基本信息</h4>
                            </div>
                            <!--属性1-->
                            <div class="row attribute-info">
                                <div class="col-lg-2 col-md-2">
                                    <span class="attribute-text">基本属性</span>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div>
                                        <span class="attribute-text">房屋户型：</span>
                                        <span class="info-text">{{house.rooms}}</span>
                                    </div>
                                    <div>
                                        <span class="attribute-text">建筑面积：</span>
                                        <span class="info-text">{{house.area}}平方米</span>
                                    </div>
                                    <div>
                                        <span class="attribute-text">房屋朝向：</span>
                                        <span class="info-text">{{house.direction}}</span>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <div>
                                        <span class="attribute-text">所在区域：</span>
                                        <span class="info-text">{{house.address}}</span>
                                    </div>
                                    <div>
                                        <span class="attribute-text">租住类型：</span>
                                        <span class="info-text">{{house.rent_type}}</span>
                                    </div>
                                    <div>
                                        <span class="attribute-text">房东电话：</span>
                                        <span class="info-text">{{house.phone_num}}</span>
                                    </div>
                                </div>
                            </div>
                            <!--属性2-->
                            <div class="row attribute-info">
                                <div class="col-lg-2 col-md-2">
                                    <span class="attribute-text">房屋卖点</span>
                                </div>
                                <div class="col-lg-8 col-md-8">
                                    <div>
                                        <span class="attribute-text">交通条件：</span>
                                        <span class="info-text">{{house.traffic | dealNone}}</span>
                                    </div>
                                    <div>
                                        <span class="attribute-text">优势条件：</span>
                                        <span class="info-text">{{house.title}}</span>
                                    </div>
                                </div>

                            </div>

                            <!--房源配套设施-->
                            <div class="attribute-header">
                                <h4>房源配套设施</h4>
                            </div>
                            <!--设施列表-->
                            <div class="row attribute-info">
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-1"></span>

                                    {% if '冰箱' in facilities %}
                                    <span class="attribute-text-sm" style="color: #f1c40f">冰箱</span>
                                    {% else %}
                                    <span class="attribute-text-sm"><s>冰箱</s></span>
                                    {% endif %}
                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-2"></span>
                                    {% if '洗衣机' in facilities %}
                                    <span class="attribute-text-sm" style="color: #f1c40f">洗衣机</span>
                                    {% else %}
                                    <span class="attribute-text-sm"><s>洗衣机</s></span>
                                    {% endif %}

                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-3"></span>

                                    {% if '电视' in facilities %}
                                    <span class="attribute-text-sm" style="color: #f1c40f">电视</span>
                                    {% else %}
                                    <span class="attribute-text-sm"><s>电视</s></span>
                                    {% endif %}
                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-4"></span>

                                    {% if '空调' in facilities %}
                                    <span class="attribute-text-sm" style="color: #f1c40f">空调</span>
                                    {% else %}
                                    <span class="attribute-text-sm"><s>空调</s></span>
                                    {% endif %}
                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-5"></span>

                                    {% if '暖气' in facilities %}
                                    <span class="attribute-text-sm" style="color: #f1c40f">暖气</span>
                                    {% else %}
                                    <span class="attribute-text-sm"><s>暖气</s></span>
                                    {% endif %}

                                </div>
                            </div>
                            <div class="row attribute-info">
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-6"></span>

                                    {% if '热水器' in facilities %}
                                    <span class="attribute-text-sm" style="color: #f1c40f">热水器</span>
                                    {% else %}
                                    <span class="attribute-text-sm"><s>热水器</s></span>
                                    {% endif %}
                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-7"></span>

                                    {% if '天然气' in facilities %}
                                    <span class="attribute-text-sm" style="color: #f1c40f">天然气</span>
                                    {% else %}
                                    <span class="attribute-text-sm"><s>天然气</s></span>
                                    {% endif %}
                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-8"></span>

                                    {% if '床' in facilities %}
                                    <span class="attribute-text-sm" style="color: #f1c40f">床</span>
                                    {% else %}
                                    <span class="attribute-text-sm"><s>床</s></span>
                                    {% endif %}
                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-9"></span>

                                    {% if '宽带' in facilities %}
                                    <span class="attribute-text-sm" style="color: #f1c40f">Wi-Fi</span>
                                    {% else %}
                                    <span class="attribute-text-sm"><s>Wi-Fi</s></span>
                                    {% endif %}
                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-10"></span>

                                    {% if '电梯' in facilities %}
                                    <span class="attribute-text-sm" style="color: #f1c40f">电梯</span>
                                    {% else %}
                                    <span class="attribute-text-sm"><s>电梯</s></span>
                                    {% endif %}
                                </div>
                            </div>

                            <!--推荐标题-->
                            <div class="attribute-header">
                                <h4>推荐房源</h4>
                                <div class="attribute-header-tip-line">
                                    <span>根据您的浏览习惯，推荐优质房源</span>
                                </div>
                            </div>
                            <!--推荐-->
                            <div class="row">
                                <div class="col-md-11 col-lg-11">
                                    <div class="row">
                                        {% for item in recommend %}
                                        <div class="col-lg-4 col-md-4">
                                            <div class="recommend">
                                                <div><a href=""><img class='img-fluid img-box'
                                                            src="/static/img/house-bg1.jpg" alt=""></a>
                                                </div>
                                                <div class="recommend-info">
                                                    <span class="glyphicon glyphicon-map-marker"></span>
                                                    <span>{{item.address}}</span>
                                                </div>
                                                <div class="recommend-info1">
                                                    <span>{{item.rooms}}-{{item.area}}平方米</span>
                                                    <span class="price float-right"
                                                        style="color: #e74c3c">￥&nbsp;{{item.price}}</span>
                                                </div>
                                            </div>
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--右边栏-->
                    <div class="col-lg-4 col-md-4">
                        <div class="row">

                            <!--line-->
                            <div class="col-lg-12 col-md-12 mx-auto attribute-header">
                                <h4><i class="fa fa-align-right" aria-hidden="true"></i>&nbsp&nbsp{{house.block}}
                                    价格走势</h4>
                                <div class="attribute-header-tip-line">
                                    <span>人工智能算法，为您预测房价走势</span>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 mx-auto browse-record-first-div self-no-padding">
                                <div id="f_line" class="echarts-tu">
                                </div>
                            </div>

                            <!--pie-->
                            <div class="col-lg-12 col-md-12 mx-auto attribute-header">
                                <h4><i class="fa fa-align-right" aria-hidden="true"></i>&nbsp&nbsp{{house.block}}
                                    户型占比</h4>
                                <div class="attribute-header-tip-line">
                                    <span>根据户型占比，了解户型稀缺度</span>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 mx-auto browse-record-first-div self-no-padding">
                                <div id="pie">
                                </div>
                            </div>

                            <!--pie2-->
                            <div class="col-lg-12 col-md-12 mx-auto attribute-header">
                                <h4><i class="fa fa-align-right" aria-hidden="true"></i>&nbsp&nbsp{{house.block}}
                                    小区房源数量TOP20</h4>
                                <div class="attribute-header-tip-line">
                                    <span>关注房源数量，了解房源热点</span>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 mx-auto browse-record-first-div self-no-padding">
                                <div id="scolumn_line">
                                </div>
                            </div>

                            <!--line2-->
                            <div class="col-lg-12 col-md-12 mx-auto attribute-header">
                                <h4><i class="fa fa-align-right" aria-hidden="true"></i>&nbsp&nbsp{{house.block}}
                                    户型价格走势</h4>
                                <div class="attribute-header-tip-line">
                                    <span>关注房源单价，了解各小区房价</span>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 mx-auto browse-record-first-div self-no-padding">
                                <div id="broken_line">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- 饼图插件 -->
<script src="/static/house/js/show_data_pie.js"></script>
<!-- 柱状图 -->
<script src="/static/house/js/show_column_data.js"></script>
<!-- 折线图 -->
<script src="/static/house/js/show_broken_line_data.js"></script>
<!-- 线性回归点状图 -->
<script src="/static/house/js/show_f_line_data.js"></script>
<script>
    $(document).ready(function () {
        // 户型占比 饼图
        $.ajax({
            type: 'post',
            url: '/get/piedata/{{house.block}}',
            dataType: 'json',
            success: function (res) {
                pie_chart(res.data)
            }
        })
        // 小区房源数量 柱状图
        $.ajax({
            type: 'post',
            url: '/get/columndata/{{house.block}}',
            dataType: 'json',
            success: function (res) {
                column_chart(res.data)
            }
        })

        // 户型价格走势 折线图
        $.ajax({
            type: 'post',
            url: '/get/brokenlinedata/{{house.block}}',
            dataType: 'json',
            success: function (res) {
                broken_line_chart(res.data)
            }
        })
        // 价格走势 线性回归点状图
        $.ajax({
            type: 'post',
            url: '/get/scatterdata/{{house.block}}',
            dataType: 'json',
            success: function (res) {
                get_line_data(res.data)
            }
        })
    })

    // 收藏功能
    $("#btn-collection").click(function(){
        $.ajax({
            type: 'post',
            url: '/collection/{{house.id}}',
            dataType: 'json',
            success: function (res) {
                if(res.code == 1)
                {
                    alert(res.msg);
                    setTimeout(() =>{
                        location.reload()
                    },1000)
                }
                else
                {
                    alert(res.msg);
                }
            }
        })
    })
</script>
{% endblock %}